<template>
  <div>
    <main-nav index="5"></main-nav>
    <i-spin size="large" fix v-if="loading"></i-spin>
    <div class="container" v-if="running.length">
      <i-carousel v-model="currentRunning">
        <i-carousel-item v-for="(item, index) in running" :key="'lives_running_'+index">
          <router-link :to="{name: 'live-details', params: {id: item.id}}">
            <img :src="item.fullCover" :alt="item.title" width="100%" />
          </router-link>
        </i-carousel-item>
      </i-carousel>
    </div>
    <div class="container margin-top-20" v-if="featured.length">
      <h2>
        <span>精选直播课</span>
      </h2>
      <i-row class="margin-top-10 featured-container">
        <i-col :md="12" :xs="0">
          <img src="../../images/default/1.jpg" v-show="!currentFeatured.avatar" />
          <img :src="currentFeatured.avatar" v-if="currentFeatured.avatar" />
        </i-col>
        <i-col :md="12" :xs="24">
          <ul>
            <li v-for="(item, index) in featured" :key="'live_featured_'+index" class="featured-item" :class="{active: featuredIndex == index}">
              <div class="featured-index-circle"></div>
              <div class="featured-index-line"></div>
              <h4 class="title">
                <date-span :value="item.startTime" format="MM-dd hh:mm"></date-span>
                <span class="margin-left-10">{{item.title}}</span>
              </h4>
            </li>
          </ul>
        </i-col>
      </i-row>
    </div>
    <div class="container margin-top-20">
      <h2><span>往期直播课程</span></h2>
      <i-row :gutter="15" class="margin-top-10" type="flex" align="bottom">
        <i-col :md="6" :xs="12" v-for="(item, index) in finished"  :key="'lives_finished_'+index">
          <div class="live-item-finished">
            <router-link :to="{name: 'live-details', params: {id: item.id}}" class="responsive-image-item">
              <img src="../../images/default/1.jpg" v-show="!item.avatar" />
              <img :src="item.avatar" v-if="item.avatar" />
              <div>
                <h3><grade-span :index="item.grade"></grade-span><subject-span :index="item.subject"></subject-span></h3>
                <h3 class="title">{{item.title}}</h3>
              </div>
            </router-link>
            <div class="live-item-body">
              <h4>{{item.title}}</h4>
              <p>
                <span>{{item.createdBy.name}}</span>
                <date-span :value="item.startTime" class="pull-right"></date-span>
              </p>
            </div>
          </div>
        </i-col>
      </i-row>
    </div>
  </div>
</template>

<script>
import MainNav from '../components/main-nav'
import DateSpan from '../components/data-span/Date'
import GradeSpan from '../components/data-span/Grade'
import SubjectSpan from '../components/data-span/Subject'
import { mapActions } from 'vuex'
export default {
  data() {
    return {
      featured: [],
      running: [],
      finished: [],
      loading: true,
      currentRunning: 0,
      featuredIndex: 0
    }
  },
  computed: {
    currentFeatured() {
      let featured = this.featured
      let featuredIndex = this.featuredIndex
      if (!featured.length) return null
      return featured[featuredIndex]
    }
  },
  components: {
    MainNav,
    DateSpan,
    GradeSpan,
    SubjectSpan
  },
  methods: {
    ...mapActions({
      getLives: 'getLives'
    })
  },
  mounted() {
    const that = this
    that.$http.get('/vts/lives').then(response => {
      that.loading = false
      const data = response.data
      that.featured = data.featured
      that.finished = data.finished
      that.running = data.running
    })
  }
}
</script>

<style lang="less" scoped>
h2 {
  text-align: center;
  > span {
    &:before,
    &:after {
      content: '——';
      font-weight: normal;
    }
    &:before {
      margin-right: 15px;
    }
    &:after {
      margin-left: 15px;
    }
  }
}
.live-item-finished {
  background: white;
  > a {
    display: block;
    position: relative;
    > div {
      position: absolute;
      top: 50%;
      margin-top: -32px;
      left: 0;
      right: 0;
      bottom: 0;
      text-align: center;
      color: white !important;
      h3 {
        font-size: 20px;
        font-weight: normal;
        &.title {
          font-weight: 300;
        }
      }
    }
  }
  .live-item-body {
    padding: 5px 0;
    > * {
      padding: 5px 15px;
    }
    h4 {
      font-size: 16px;
      font-weight: normal;
    }
  }
}

img {
  width: 100%;
}
.featured-container {
  ul {
    background: #ddd;
  }
  img {
    max-height: 290px;
  }
  .featured-item {
    position: relative;
    padding: 12.5px 0;
    padding-left: 20px;
    padding-right: 5px;

    h4 {
      font-size: 15px;
    }

    .featured-index-line {
      border-left: 2px solid darken(#ddd, 10%);
      position: absolute;
      left: 12px;
      height: 100%;
      top: 0;
    }

    .featured-index-circle {
      width: 6px;
      height: 6px;
      background-color: darken(#ddd, 30%);
      border-radius: 50%;
      border: 1px solid transparent;
      position: absolute;
      top: 50%;
      margin-top: -3px;
      left: 10px;
      z-index: 2;
    }

    &.active {
      background: white;
      .featured-index-circle {
        background-color: #39f;
      }
      color: #39f;
    }
  }
}
</style>
